import { App } from 'vue';
import { usePermissionStoreWithOut } from '../store/modules/permission';
import { router } from '../router/index';
import { checkPower } from './permission';

export default function registerGlobDirective(app: App) {
  app.directive('per', {
    mounted(el, binding) {
      const permissionStore = usePermissionStoreWithOut();
      const permission = binding.value; // 获取权限值
      const hashPower = permissionStore.getHashPower;
      const pageName = router.currentRoute.value.path.replace(/\//g, ':').slice(1);
      // 获取当前路由名称
      const powerName = `${pageName}:${permission}`;
      const havePermission = checkPower(hashPower, powerName);
      if (!havePermission) {
        el.parentElement.removeChild(el); // 不拥有该权限移除dom元素
      }
    },
  });
}
